/*
 * Wire
 * Copyright (C) 2018 Wire Swiss GmbH
 *
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with this program. If not, see http://www.gnu.org/licenses/.
 *
 */

.preferences-section-account-profile {
  display: flex;
  position: relative;
  justify-content: space-between;
  width: 536px;
}

.preferences-section-account-security {
  margin-top: 32px;
  margin-bottom: 32px;

  .preferences-separator {
    margin-bottom: 24px;
  }
}

.preferences-section-account-space-before {
  margin-top: @line-height-lg;
}

.preferences-section-account-space-after {
  margin-bottom: @line-height-lg;
}

.preferences-account-user-data {
  line-height: @line-height-xl;
}

.preferences-account-accent-color {
  width: 100%;
}

.preferences-account-mail,
.preferences-account-phone {
  .no-text-selection();
}

.preferences-account-picture-button {
  .square(@avatar-diameter-xl);
  position: relative;
  display: inline-block;
  cursor: pointer;

  > span {
    .full-screen;
    .flex-center;
    color: #fff;
    font-size: @font-size-xl;
    pointer-events: none;
    opacity: 0;

    &::before {
      text-shadow: 0 0 40px fade(#000, 80%);
    }
  }

  &:hover {
    > span {
      opacity: 1;
    }
  }

  > participant-avatar {
    pointer-events: none;
  }

  > input {
    position: absolute;
    left: -9999px;
  }
}

.preferences-account-name-wrapper {
  position: relative;
  width: 256px;
}

.preferences-account-username-wrapper {
  position: relative;
  width: 256px;
  min-height: @line-height-xl * 2;
}

.preferences-account-input {
  .reset-textarea;
  background: transparent;
  height: @line-height-xl;
  line-height: @line-height-xl;
  margin-left: -4px;
  width: 100%;
  padding-left: 4px;
  padding-right: 28px;

  &::placeholder {
    .label-xs();
  }

  &:hover + .preferences-account-input-icon-edit::after {
    .icon-mixin('\e177'); // icon-edit
    font-size: 12px;
  }

  &:focus,
  &:hover {
    background-color: #fff;
  }

  &:focus + .preferences-account-input-icon-edit::after {
    content: '';
    display: none;
  }
}

.preferences-account-input-icon {
  position: absolute;
  right: 12px;
  top: 0px;
}

.preferences-account-name {
  font-weight: @font-weight-bold;
}

.preferences-account-username-atsign {
  position: absolute;
  top: 0;
  left: 0;
  line-height: @line-height-xl;
  color: @graphite;
}

.preferences-account-username {
  padding-left: 22px;

  &:focus ~ .preferences-account-username-hint {
    display: block;
  }
}

.preferences-account-username-hint {
  display: none;
}

.preferences-account-availability {
  .label-bold-xs;
  cursor: pointer;
}
